<template>
  <div class="giftCardItemList">
    <search-block type="flex">
      <template slot="button">
        <el-button type="primary" @click="search(true)">查询</el-button>
        <el-popover
          v-model="statVisible"
          placement="bottom"
          trigger="click">
          <el-button slot="reference" @click="getStat">统计</el-button>
          <div>
            <el-descriptions direction="vertical" :column="3" border v-if="statData">
              <el-descriptions-item
                v-for="({label, value}) in giftCardStatusOptions"
                :key="value"
                :label-class-name="statusClass(value)"
                :label="label">{{statData[value] || 0}}</el-descriptions-item>
            </el-descriptions>
            <el-skeleton animated style="width:190px;height:185px" v-else>
              <template slot="template">
                <el-skeleton-item variant="rect" style="width:189px;height:90px"/>
                <el-skeleton-item variant="rect" style="width:189px;height:90px"/>
              </template>
            </el-skeleton>
          </div>
        </el-popover>
      </template>
      <el-form inline :model="model" @submit.native.prevent>
        <el-form-item label="卡号:">
          <el-input v-model="model.cardSn" clearable></el-input>
        </el-form-item>
        <el-form-item label="卡状态:">
          <el-select v-model="model.status" clearable>
            <el-option
              v-for="item in giftCardStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </search-block>
    <y-table
      ref="table"
      border
      pagination
      :getDataWay="getDataWay"
      :columns="columns"
    >
      <el-table-column slot="status" label="状态" align="center" header-align="center" width="250">
        <template v-slot="{row}">
          <div>卡状态：
            <span :class="statusClass(row.status)">{{$$getCommonArrayName(row.status, giftCardStatusOptions)}}</span>
          </div>
          <div v-if="!!row.ownerId">绑定时间：{{ row.ownTime.replace('T', ' ') }}</div>
        </template>
      </el-table-column>
      <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="100" fixed="right">
        <template v-slot="{row}">
          <div class="wrap-table-buttons">
            <el-button size="mini" @click="querySecret(row)">查看密码</el-button>
            <el-popconfirm
                v-if="row.status === '0' || row.status === '4'"
                title="是否确认删除该礼金卡？"
                @confirm="delCard(row)">
              <el-button slot="reference" type="danger" size="mini" style="width: 80px">删除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </y-table>
    <el-dialog
      :visible.sync="secretForms.showForm"
      append-to-body
      title="礼金卡密码"
      width="50%">
      <el-descriptions :column="2" border direction="vertical">
        <el-descriptions-item>
          <template slot="label">
            礼金卡卡号
          </template>
          {{ secretForms.formModel.cardSn }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            礼金卡密码
          </template>
          {{ secretForms.formModel.cardSecret }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "giftCardItemList",
  inject: ['getEnum'],
  props:{
    batchId: String
  },
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.sem.giftCardPage,
        param: Object.assign({
          batchId: this.batchId
        }, this.model)
      }
    }
  },
  data(){
    return{
      statVisible: false,
      statData: null,
      giftCardStatusOptions: this.getEnum('giftCardStatus'),
      model:{
        cardSn: ''
      },
      columns: [
        {
          label: '卡号',
          prop: 'cardSn',
          width: 155
        },
        {
          label: '发行时间',
          prop: 'issueTime',
          width: 160,
          formatter(row){
            return (row.issueTime || '').replace('T', ' ');
          }
        },
        {
          label: '有效期至',
          prop: 'deadLine',
          width: 120,
          formatter(row){
            return (row.deadLine || '').replace('T', ' ');
          }
        },
        {
          label: '余额/面额',
          prop: 'couponValue',
          minWidth: 120,
          formatter(row){
            return `${row.restValue}元/${row.couponValue}元`
          }
        },
        {
          prop: 'status',
          template: true
        }
      ],
      secretForms:{
        showForm: false,
        formModel: {
          cardSn: '',
          cardSecret: ''
        }
      }
    }
  },
  methods:{
    search(jumpToFirst){
      this.$refs['table'].loadData(Object.assign({
        batchId: this.batchId
      }, this.model), jumpToFirst);
    },
    delCard(row){
      this.$yAxios({
        url: this.$api.sem.removeGiftCard,
        data:{
          ids: [row.id]
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
      })
    },
    querySecret(row){
      this.$yAxios({
        url: this.$api.sem.giftCardSecret,
        data:{
          cardSn: row.cardSn
        },
        loading: true
      }, info => {
        this.secretForms.formModel.cardSn = row.cardSn;
        this.secretForms.formModel.cardSecret = info.secret;
        this.secretForms.showForm = true;
      })
    },
    statusClass(status){
      switch(status){
        case '0': return 'y-success';
        case '1': return 'y-warning';
        case '2': return 'y-primary';
        case '3': return 'y-danger';
        case '4': return 'y-info';
        case '5': return 'y-warning';
      }
      return ''
    },
    getStat(){
      this.$yAxios({
        url: this.$api.sem.giftCardStat,
        data: {
          batchId: this.batchId
        }
      }, info => {
        this.$set(this, 'statData', info);
      })
    }
  }
}
</script>

<style scoped>

</style>